import React, { useState } from 'react';
import DataLoader from './components/DataLoader/DataLoader';
import ModelTrainer from './components/ModelTrainer/ModelTrainer';
import Predictor from './components/Predictor/Predictor';
import MontyHall from './components/MontyHall/MontyHall';
import './App.css';

function App() {
  const [data, setData] = useState([]);
  const [model, setModel] = useState(null);
  const [trainingHistory, setTrainingHistory] = useState(null);
  const [activeTab, setActiveTab] = useState('dataLoader');

  return (
    <div className="app-container">
      <h1>Digital Sequence Predictor</h1>
      
      <div className="tabs">
        <button 
          className={activeTab === 'dataLoader' ? 'active' : ''} 
          onClick={() => setActiveTab('dataLoader')}
        >
          Data Loader
        </button>
        <button 
          className={activeTab === 'modelTrainer' ? 'active' : ''} 
          onClick={() => setActiveTab('modelTrainer')}
          disabled={!data.length}
        >
          Model Trainer
        </button>
        <button 
          className={activeTab === 'predictor' ? 'active' : ''} 
          onClick={() => setActiveTab('predictor')}
          disabled={!model}
        >
          Predictor
        </button>
        <button 
          className={activeTab === 'montyHall' ? 'active' : ''} 
          onClick={() => setActiveTab('montyHall')}
          disabled={!model}
        >
          Monty Hall
        </button>
      </div>

      <div className="tab-content">
        {activeTab === 'dataLoader' && <DataLoader setData={setData} />}
        {activeTab === 'modelTrainer' && (
          <ModelTrainer 
            data={data} 
            setModel={setModel} 
            setTrainingHistory={setTrainingHistory} 
          />
        )}
        {activeTab === 'predictor' && (
          <Predictor 
            model={model} 
            data={data} 
            trainingHistory={trainingHistory} 
          />
        )}
        {activeTab === 'montyHall' && (
          <MontyHall 
            model={model} 
            data={data} 
          />
        )}
      </div>
    </div>
  );
}

export default App;